﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>demo</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-family: 微软雅黑;
        }

        body {
            padding-bottom: 50px;
        }

        fieldset {
            margin: 15px;
            padding: 15px;
            padding-top: 5px;
        }

        .sj-1 {
            padding-left: 80px;
        }

        .sj-2 {
            padding-left: 120px;
        }

        fieldset > ul {
            background-color: aquamarine;
            padding-bottom: 10px;
        }

        fieldset > ol {
            background-color: lightblue;
        }

        fieldset > ul > li, fieldset > ol > li {
            display: block;
            line-height: 22px;
            list-style: none;
            padding-left: 40px;
            font-size: 15px;
        }

        fieldset > ul > li:first-child, fieldset > ol > li:first-child {
            padding-left: 15px;
            font-size: 18px;
        }

        fieldset > button {
            width: 80px;
        }

        body > ol > li {
            display: block;
            padding-left: 25px;
        }
    </style>
    <script>
        window.onload = function () {
            document.getElementById("btnFunc1").addEventListener("click",
                function () {
                    var result = Func1(2, 3);
                    alert(result);
                });
            document.getElementById("btnFunc2").addEventListener("click",
                function () {
                    Func2(function (n1, n2) {
                        alert(n1 * n2);
                    });
                });
            document.getElementById("btnFunc3").addEventListener("click",
                function () {
                    var result = Func3({n1: 4, n2: 5});
                    alert(JSON.stringify(result));
                });
            document.getElementById("btnFunc5").addEventListener("click",
                function () {
                    var func = Func5();
                    alert(func("刘德华"));
                });
        };
    </script>
</head>
<body>
<fieldset>
    <legend>普通调用,参数和返回值都是基本类型</legend>
    <button id="btnFunc1">执行</button>
</fieldset>
<fieldset>
    <legend>向Go传递函数</legend>
    <button id="btnFunc2">执行</button>
</fieldset>
<fieldset>
    <legend>向Go传递非基本类型</legend>
    <button id="btnFunc3">执行</button>
</fieldset>
<fieldset>
    <legend>返回值是一个Go函数</legend>
    <button id="btnFunc5">执行</button>
</fieldset>
<ol>
    <li>额外的说明</li>
    <li>所有从js接收的数字都是float64类型</li>
    <li>从Js返回的JsFunc可以在不同的线程使用，因为内部绑定了线程。</li>
</ol>
</body>
</html>